<template>
	<view class="mine">
		<!-- 个人信息区域 -->
		<view class="my-info">
			<image :src="mineImage" class="my-info-logo" mode="aspectFit" id="image-logo"
				style="height:60px;margin: 10px auto;">
			</image>
			<view class="my-info-name">
				<text style="font-size: 15px" @click="Userlogin">{{name}}</text>
			</view>
			<view class="my-info-change">
				<view style="display: flex;font-size: 13px;align-items: center;">
					<image src="../../static/tabs/editChange.png" alt style="width: 17px;height: 17px;"></image>
					<text @click="changeInfo">修改资料</text>
				</view>
			</view>
		</view>
		<view class="day-schedule" style="margin:90px auto ;">
			<uni-card title="今日日程">
				<uni-list v-for="item in dailyScheduleList">
					<uni-list-item class="day-schedule-item" :title='item.title' :note="item.beginTime+'-'+item.endTime"
						 :to="'/pages/mine/checkSchedule?id='+item.id" :extra='item.location'></uni-list-item>
				</uni-list>
			</uni-card>
			<uni-card title="当周日程" sub-title="点击进入当周日程" @click="onClickWeek">
			</uni-card>
			<uni-card title="所有日程" sub-title="点击进入所有日程" @click="onClick">
			</uni-card>
		</view>
		

	</view>

</template>

<script>
	
	function removeDate(date) {
		if (typeof date !== 'string') {
			return
		}
		var n = date.split(" ")
		var result = n[1]
		return result
	};
	export default {
		data() {
			return {
				uid: 1,
				name: '未登录',
				mineImage: '../../static/tabs/mine.png',
				time: '',
				apiUrl: "http://localhost:8080/",
				dailyScheduleList: []

			}
		},

		methods: {
			onClickWeek(e){
				if (e == 'title') {
					uni.navigateTo({
						url: "/pages/mine/weekCalendar"
					})
				} else if (e == 'content') {
					console.log('is content')
				}
			},
			changeInfo(){
				uni.navigateTo({
					url:"/pages/mine/userInfo"
				})
			},
			onClick(e) {
				if (e == 'title') {
					uni.navigateTo({
						url: "/pages/mine/calendar"
					})
				} else if (e == 'content') {
					console.log('is content')
				}
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			dataInit() {
				console.log('初始化今日日程');
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				month = month + 1;
				if (month < 10) month = "0" + month;
				if (date < 10) date = "0" + date;
				this.time = year + "-" + month + "-" + date;
				console.log('今天的日期是',this.time);
				uni.request({
					url: this.apiUrl + 'schedule',
					method: 'GET',
					data: {
						uid: this.uid,
						date: this.time
					},
					success: (res) => {
						console.log('请求远程天数据')
						this.dailyScheduleList = []
						this.dailyScheduleList = res.data.records;
						console.log('今日日程有',this.dailyScheduleList)
						uni.setStorageSync(this.uid+'dailySchedule'+this.time,this.dailyScheduleList)
					},
					fail: (err) => {
						console.log('请求本地天数据')
						this.dailyScheduleList = uni.getStorageSync(this.uid+'dailySchedule'+this.time);
						console.log(this.dailyScheduleList)
						
					}
				});
			},
			Userlogin(){
				console.log('login')
			}

		},
		onPullDownRefresh() { //延迟一秒刷新成功
		this.dataInit()
			console.log('刷新'),
			setTimeout(() => {
				this.msg = 'refresh',
					uni.stopPullDownRefresh()
			}, 1000)

		},
		onShow() {
			this.dataInit()
		}

	}
</script>

<style>
	text {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	navigator:hover {
		/* 当鼠标放到该位置时触发 */
	}

	/* 个人主页信息模块 */
	.my-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 固定盒子 */
		position: fixed;
		top: 0;
		/* 固定盒子居中方法 */
		left: 50%;
		/* 兼容老版本谷歌浏览器 */
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		/* 固定盒子要有宽度 */
		width: 90%;
		/* min-width: 300px;
		max-width: 540px; */
		/* 高度固定 */
		height: 80px;
		background-color: #FFE4B5;
		border-radius: 15px 15px 15px 15px;
		z-index: 999;
	}

	.my-info-logo {
		flex: 1;
	}

	.my-info-name {
		margin: 15px auto;
		flex: 2;
	}

	.my-info-change {
		flex: 1;
		margin: 13px auto;
		border-radius: 20px;
		text-align: center;
	}
</style>
